<template>
  <div class="vol_meeting">
    <div class="vol_meeting_apply">
      <van-form>
        <van-collapse v-model="collapseActive">
          <!-- 会务费用 -->
          <meeting-price
            ref="refMeetingPrice"
            @submit="handleSubmit"
          ></meeting-price>
          <!-- 会议材料 -->
          <meeting-material
            ref="refMeetingMaterial"
            @submit="handleSubmit"
          ></meeting-material>
          <!-- 服务费 -->
          <!-- <server-price
            ref="refServerPrice"
            :speaker-list="speakerList"
          ></server-price>  -->
        </van-collapse>
      </van-form>
    </div> 
  </div>

  <base-footer>
    <van-button
      type="primary"
      block
      @click="clickSubmit"
    >提 交</van-button>
  </base-footer>
</template>

<script setup>
import MeetingPrice from './components/meeting-price.vue'
// import ServerPrice from './components/server-price.vue'
import MeetingMaterial from './components/meeting-material.vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ref, inject, onMounted, computed, watch } from 'vue'
import { showSuccessToast, showConfirmDialog } from 'vant'

const router = useRouter();
const route = useRoute();
const store = useStore();

const api = inject('api')
const refMeetingPrice = ref()
const refMeetingMaterial = ref();
const speakerList = ref([]);
const detail = ref({})
const collapseActive = ref([
  'meetingPrice',
  'serverPrice',
  'meetingMaterial'
])

const userInfo = computed(() => store.getters['user/getUserInfo'])

function handleSubmit () {
  handleSettle('catch')
}
// 点击提交
function clickSubmit () {
  showConfirmDialog({
    title: '温馨提示',
    message: "确定提交结算吗？",
  })
  .then(() => {
    handleSettle()
  })
  .catch(() => {});
}

function handleSettle (type = '') {
  const params = {};
  params.meetingSettlementCostList = refMeetingPrice.value?.getParams();
  params['attachIds'] = refMeetingMaterial.value?.getParams() || [];
  params.id = detail.value.id;

  api.meetingSettle(params, { hideLoading: type == 'catch' }).then(res => {
    if (!res.code) {
      if (type !== 'catch') {
        showSuccessToast('操作成功')
        router.go(-1)
      }
    }
  })
}

function getDetail() {
  if (!route.params.id) return
  api.meetingDetail(route.params.id).then(res => {
    if (!res.code) {
      res.data.costs = (res.data.costs || []).filter(item => ![5,6].includes(item.category))
      detail.value = res.data
      refMeetingPrice.value?.setParams(res.data)
      refMeetingMaterial.value?.setParams(res.data)

      const schedules = res.data.schedules;
      speakerList.value = []
      schedules.forEach(item => {
        speakerList.value = [
          ...speakerList.value,
          ...(item.speakers || [])
        ]
      })
    }
  })
}
onMounted(() => {
  getDetail()
})
</script>